<template>
    <el-card>
        <div v-if="$store.getters['user/GET_LOGIN_INFO'].registerState === 'REGISTER_UNDERWAY'">
            <el-form ref="registerForm" :model="companyRegisterEntity" :rules="companyRegisterRules" label-width="110px"
                class="registerForm sign-up-form">
                <div @keyup.enter="userRegistoryEnter">
                    <h2>Sky后台管理系统注册</h2>
                    <el-row class="formBox">
                        <el-col :span="10" class="rightBox">
                            <el-form-item label="企业营业执照" prop="companyLicense">
                                <fileUpload :width="460" :height="290" :file-number="1" url="/common/upload/fileUpload/"
                                    v-model="companyRegisterEntity.companyLicense" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="14" class="leftBox">
                            <el-form-item label="企业名称" prop="companyName">
                                <el-input v-model="companyRegisterEntity.companyName" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="法人" prop="leader">
                                <el-input v-model="companyRegisterEntity.leader" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="法人电话" prop="phone">
                                <el-input v-model="companyRegisterEntity.phone" placeholder="请输入法人电话"></el-input>
                            </el-form-item>
                            <el-form-item label="省市区" prop="pcdCode">
                                <el-cascader v-model="companyRegisterEntity.pcdCode" :props="defaultProps"
                                    style="width:100%" :options="$store.getters['common/GET_ADDRESS_TREE']"></el-cascader>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="address">
                                <el-input v-model="companyRegisterEntity.address"
                                    placeholder="请输入企业详细地址,如:XX路XX大厦XX座XX栋XX层XX室"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="12" class="btnBoxL">
                            <el-button @click="handleRegister" class="submit-btn">注册</el-button>
                        </el-col>
                        <el-col :span="12" class="btnBoxR">
                            <el-button @click="handleRegister" class="submit-btn">重置</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <div v-else>
            <h2>Sky后台管理系统</h2>
            <span>企业信息正在审核中</span>
        </div>
    </el-card>
</template>

<script>
import { companyRegisterEntity, companyRegisterRules } from './entity/companyRegister'
import fileUpload from '@/components/common/fileUpload/fileUpload.vue';
import { companyRegister } from '@/api/system/registerLoginApi';
export default {
    components: { fileUpload },
    data() {
        return {
            companyRegisterEntity,
            companyRegisterRules,
            defaultProps: {
                children: 'childList',
                label: 'addressName',
                value: 'postCode'
            },
        }
    },
    methods: {
        userRegistoryEnter() {
            console.log(this.companyRegisterEntity)
        },
        handleRegister() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    this.companyRegisterEntity.provinceCode = this.companyRegisterEntity.pcdCode[0];
                    this.companyRegisterEntity.cityCode = this.companyRegisterEntity.pcdCode[1];
                    this.companyRegisterEntity.districtCode = this.companyRegisterEntity.pcdCode[2];
                    this.companyRegisterEntity.companyLicense = this.companyRegisterEntity.companyLicense.join();
                    companyRegister(this.companyRegisterEntity).then(data => {
                        this.$message.success(data);
                        this.$refs.registerForm.resetFields();
                        this.$router.push({ path: '/index' })
                    }).catch(err => {
                        this.$message.error(err);
                    })
                } else {
                    return false;
                }
            })

        },
    },
}
</script>

<style scoped lang="scss">
.el-card {
    width: 80vw;
    transform: translate(10vw, 30%);
}

h2 {
    padding-top: 42px;
    text-align: center;
    font-size: 28px;
    background-image: linear-gradient(135deg, #1d131f, #409eff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 1px 1px 3px rgb(128, 128, 128);
}

.formBox {
    padding: 30px 240px 20px 240px;

    .leftBox {
        padding-right: 20px;
    }

    .rightBox {
        padding-left: 20px;
    }

}

.btnBoxL {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.btnBoxR {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.submit-btn {
    width: 150px;
    background-color: #5995fd;
    border: none;
    outline: none;
    height: 49px;
    border-radius: 49px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 50px;
    cursor: pointer;
    transition: 0.5s;
}
</style>